import echarts from 'echarts/lib/echarts';
import { any } from 'prop-types';

export function getGauge(optionSet: Array<any> = []) {
  const optArr = JSON.parse(JSON.stringify(optionSet));
  optArr.forEach(e => {
    e.label = {};
    e.labelLine = {};
    if (e.value === '0') {
      e.label.show = false;
      e.labelLine.show = false;
    }
  });
  const parData = optArr || [];
  const legendArr = parData.map((e, i) => {
    const x = i % 2 === 0 ? '55%' : '70%';
    return {
      orient: 'vertical',
      icon: 'circle',
      x: x,
      y: 8 + parseInt(i / 2) * 10 + '%', // 0 1 => 20,2 3 => 35, 4 5 => 50, 6 7 => 65
      align: 'left',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 8,
      show: false,
      data: [e.name],
      textStyle: {
        fontSize: 12,
        color: '#06C5FD',
      },
    };
  });
  const option = {
    color: ['#B4866C', '#A16E5E', '#815547', '#C5D0CC', '#A0B9EC', '#8B94D7', '#BDAEEE', '#FFBDCE', '#9CD4D8', '#B9D08A', '#68BE8D', '#FFC992'],
    tooltip: {
      trigger: 'item',
      formatter: '<br/>{b} : {c} ({d}%)',
    },
    legend: legendArr,
    calculable: true,
    series: [
      {
        name: '半径模式',
        type: 'pie',
        radius: [20, 110],
        center: ['52%', '45%'],
        roseType: 'radius',
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        lableLine: {
          normal: {
            show: false,
          },
          emphasis: {
            show: true,
          },
        },
        data: parData,
      },
    ],
  };
  return option;
}

export function getGaugeCategories(optionSet: Array<any> = []) {
  const optArr = JSON.parse(JSON.stringify(optionSet));
  optArr.forEach(e => {
    e.label = {};
    e.labelLine = {};
    if (e.value === '0') {
      e.label.show = false;
      e.labelLine.show = false;
    }
  });
  const parData = optArr || [];
  const legendArr = parData.map((e, i) => {
    const x = i % 2 === 0 ? '55%' : '70%';
    return {
      orient: 'vertical',
      icon: 'circle',
      x: x,
      y: 8 + parseInt(i / 2) * 10 + '%', // 0 1 => 20,2 3 => 35, 4 5 => 50, 6 7 => 65
      align: 'left',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 8,
      show: false,
      data: [e.name],
      textStyle: {
        fontSize: 12,
        color: '#06C5FD',
      },
    };
  });
  const parDataCategories = [];
  parData.forEach(item=>{
    parDataCategories.push({name:item.name,value:item.faultNum});
  })
  const option = {
    color: ['#B4866C', '#A16E5E', '#815547', '#C5D0CC', '#A0B9EC', '#8B94D7', '#BDAEEE', '#FFBDCE', '#9CD4D8', '#B9D08A', '#68BE8D', '#FFC992'],
    tooltip: {
      trigger: 'item',
      formatter: '<br/>{b} : {c} ({d}%)',
    },
    legend: legendArr,
    calculable: true,
    series: [
      {
        name: '半径模式',
        type: 'pie',
        radius: [60, 100],
        center: ['52%', '45%'],
        avoidLabelOverlap: false,
        // roseType: 'radius',
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: true,
          },
        },
        lableLine: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        data: parDataCategories,
      },
    ],
  };
  return option;
}

export function getLine(optionSets: Array<any> = []) {
  let optionSet = [];
  if(optionSets){
    optionSets.forEach(item => {
      optionSet.push({name: item.name.substr(5, 5),value:item.value});
    })
  }
  const xAxisData = optionSet.map((e: any) => e.name);
  const serisData = optionSet.map((e: any) => +e.value);
  const maxNum = Math.max.apply(null, serisData);
  const maxNumYsplice = maxNum > 10 ? 8 : maxNum;
  const option = {
    legend: {
      right: '6%',
      top: '10%',
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 30,
      icon: 'rectangle',
      textStyle: {
        color: '#fff',
      },
      data: [],
    },
    grid: [{
        top: '30%',
        left: '12%',
        right: '8%',
    }],
    tooltip: {
      trigger: 'axis',
      // axisPointer: {
      //     type: 'cross',
      // },
      formatter: '日期：{b} <br />报警次数： {c0}' + '次',
    },
    xAxis: {
      // type: 'category',
      name: '',
      boundaryGap: true,
      axisLabel: {
        textStyle: {
          color: '#FFFFFF',
        },
      },
      axisLine: {
        lineStyle: {
          color: '#054792', // X轴及其文字颜色
          width: 0.5,
        },
      },
      axisTick: {
        show: false,
        alignWithLabel: true
      },
      splitLine: {
        show: false,
      },
      data: xAxisData,
    },
    yAxis: {
      type: 'value',
      splitNumber : maxNumYsplice,
      axisLabel: {
        textStyle: {
          color: '#FFFFFF',
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: '#054792', // Y轴及其文字颜色
          width: 0.5,
        },
      },
      splitLine: {
        // 分割线颜色修改
        show: true,
        lineStyle: {
          color: 'RGBA(0, 100, 170, 0.4)',
          type: 'dotted'
        }
      },
    },
    series: [
      {
        barWidth : 20,//柱图宽度
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#2647FD'
                        }, {
                            offset: 1,
                            color: '#41A0F2'
                        }]),
          },
        },
        type: 'bar',
        data: serisData,
      },
    ],
  };
  return option;
}

// 设备
export function deviceGetLine(optionSets: Array<any> = []) {
  let optionSet = [];
  if(optionSets){
    optionSets.forEach(item => {
      optionSet.push({name: item.name.substr(3, 5) + '月',value:item.value});
    })
  }
  const xAxisData = optionSet.map((e: any) => e.name);
  const serisData = optionSet.map((e: any) => +e.value);
  const maxNum = Math.max.apply(null, serisData);
  const maxNumYsplice = maxNum > 10 ? 4 : maxNum;
  const option = {
    legend: {
      right: '6%',
      top: '10%',
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 30,
      icon: 'rectangle',
      textStyle: {
        color: '#fff',
      },
      data: [],
    },
    grid: [{
        top: '15%',
        left: '10%',
        right: '4%',
    }],
    tooltip: {
      trigger: 'axis',
      // axisPointer: {
      //     type: 'cross',
      // },
      formatter: '日期：{b} <br />设备数量： {c0}' + '次',
    },
    xAxis: {
      // type: 'category',
      name: '',
      boundaryGap: true,
      axisLabel: {
        textStyle: {
          color: '#FFFFFF',
        },
      },
      axisLine: {
        lineStyle: {
          color: 'RGBA(255, 255, 255, 0.2)', // Y轴及其文字颜色
          width: 1,
        },
      },
      axisTick: {
        show: false,
        alignWithLabel: true
      },
      splitLine: {
        // 分割线颜色修改
        show: true,
        lineStyle: {
          color: 'RGBA(255, 255, 255, 0.1)',
        }
      },
      data: xAxisData,
    },
    yAxis: {
      type: 'value',
      splitNumber : maxNumYsplice,
      axisLabel: {
        textStyle: {
          color: '#FFFFFF',
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: 'RGBA(255, 255, 255, 0.2)', // Y轴及其文字颜色
          width: 0.5,
        },
      },
      splitLine: {
        // 分割线颜色修改
        show: true,
        lineStyle: {
          color: 'RGBA(255, 255, 255, 0.1)',
        }
      },
    },
    series: [
      {
        barWidth : 20,//柱图宽度
        smooth:false,
        itemStyle: {
          normal: {
            lineStyle:{
                width:2,
                type:'dotted'  //'dotted'虚线 'solid'实线
            },
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#1FF2EB'
                        }, {
                            offset: 1,
                            color: '#1FF2EB'
                        }]),
          },
        },
        type: 'line',
        data: serisData,
      },
    ],
  };
  return option;
}

export function deviceGetColumnar(optionSets: Array<any> = []) {
  let optionSet = [];
  if(optionSets){
    optionSets.forEach(item => {
      optionSet.push({name: item.title.substr(5, 5),value:item.value});
    })
  }
  let nom = [];
  let abNom = [];
  optionSets.forEach(item => {
    if(item.name == '正常'){
      nom.push(item);
    }else {
      abNom.push(item);
    }
  })
  const xAxisData = nom.map((e: any) => e.title.substr(5, 5));
  const serisData = nom.map((e: any) => +e.value);
  const serisDatas = abNom.map((e: any) => e.value);
  const maxNum = Math.max.apply(null, serisDatas||serisData);
  const maxNumYsplice = maxNum >= 10 ? 6 : maxNum >= 1 ? maxNum :1;
  const option = {
    legend: {
      right: '6%',
      top: '5%',
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 30,
      icon: 'rectangle',
      textStyle: {
        color: '#fff',
      },
      data: ['当日设备总数','当日发生异常设备'],
    },
    grid: [{
        top: '15%',
        left: '10%',
        right: '4%',
    }],
    tooltip: {
        trigger: 'axis',
        // axisPointer: {
        //     type: 'cross',
        //     crossStyle: {
        //         color: '#999'
        //     }
        // }
    },
    xAxis: {
      // type: 'category',
      name: '',
      // boundaryGap: true,
      axisLabel: {
        // interval: 0,
        textStyle: {
          color: '#FFFFFF',
        },
      },
      axisLine: {
        lineStyle: {
          color: 'RGBA(255, 255, 255, 0.2)', // X轴及其文字颜色
          width: 0.5,
        },
      },
      axisTick: {
        show: false,
        alignWithLabel: true
      },
      splitLine: {
        // 分割线颜色修改
        show: true,
        lineStyle: {
          color: 'RGBA(255, 255, 255, 0.1)',
        }
      },
      data: xAxisData,
    },
    yAxis: {
      type: 'value',
      splitNumber : maxNumYsplice,
      axisLabel: {
        textStyle: {
          color: '#FFFFFF',
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: 'RGBA(255, 255, 255, 0.2)', // Y轴及其文字颜色
          width: 0.5,
        },
      },
      splitLine: {
        // 分割线颜色修改
        show: true,
        lineStyle: {
          color: 'RGBA(255, 255, 255, 0.1)', 
        }
      },
    },
    series: [
      {
        barWidth : 13,//柱图宽度
        name:'当日设备总数',
        smooth:false,
        itemStyle: {
          normal: {
            lineStyle:{
                width:2,
                type:'dotted'  //'dotted'虚线 'solid'实线
            },
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#4BAFFD'
                        }, {
                            offset: 1,
                            color: '#2E65F3'
                        }]),
          },
        },
        type: 'bar',
        data: serisData,
      },{
        barWidth : 13,//柱图宽度
        name:'当日发生异常设备',
        smooth:false,
        itemStyle: {
          normal: {
            lineStyle:{
                width:2,
                type:'dotted'  //'dotted'虚线 'solid'实线
            },
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#FDB84B'
                        }, {
                            offset: 1,
                            color: '#F32E2E'
                        }]),
          },
        },
        type: 'bar',
        data: serisDatas,
      },
    ],
  };
  return option;
}

export function deviceGetGaugeCategories(optionSet: Array<any> = []) {
  let infosCountsData = [];
  optionSet.forEach(item => {
      if(item.name === '正常' || item.name === '异常') {
          infosCountsData.push(item);
      }
  });
  // infosCountsData[1].value = "100";
  const option = {
    color: ['#3AC2D6', '#EE5E53 '],
    tooltip: {
      trigger: 'item',
      formatter: '<br/>{b} : {c} ({d}%)',
    },
    // legend: legendArr,
    calculable: true,
    series: [
      {
        name: '半径模式',
        type: 'pie',
        radius: [110, 145],
        center: ['39%', '58%'],
        avoidLabelOverlap: false,
        // roseType: 'radius',
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        lableLine: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        data: infosCountsData,
      },
    ],
  };
  return option;
}
